<template>
	<view class="user">
		<view class="" style="background-color: #1A66FF;height: 320rpx;">
			<view class="user-t">
				<view class="user-t-a">
					<image :src="beaeUrl + userInfo.avatar" mode=""></image>
				</view>
				<view class="user-t-r">
					<view class="user-t-r-n">
						{{userInfo.nickname||''}}
					</view>
				</view>
				<!-- <view class="user-t-r">
					<image src="../../static/top.png" />
				</view> -->
			</view>
			<view class="user-h">
				{{hospital_name}}
			</view>
		</view>

		<!-- 工单列表 -->
		<!-- <view class="user-o">
			<view class="user-o-i" @tap="navOrder(item.id)" v-for="(item,index) in order" :key="item.id">
				<view class="user-o-i-n">
					{{item.name}}
				</view>
				<view class="user-o-i-m">
					<text class="user-o-i-m-a">{{item.num}}</text>条
				</view>
			</view>
		</view> -->
		<!-- 功能列表 -->
		<view class="user-g" @tap="jumpFun(item.id)" v-for="(item,index) in orderList" :key="item.id">
			<view class="user-g-i">
				<view class="user-g-i-i">
					<image :src="item.imgUrl" mode=""></image>
				</view>
				<view class="user-g-i-n">
					{{item.name}}
				</view>
			</view>
			<view class="user-g-a">
			</view>
		</view>
		<!-- 
		 <button open-type="contact" bindcontact="handleContact" session-from="sessionFrom"></button>
		 -->
		<!-- <button open-type="contact" bindcontact="handleContact" session-from="sessionFrom" class="user-g kefu">
			<view class="user-g-i" style="display: flex;align-items: center;">
				<view class="user-g-i-i">
					<image src="../../static/user3.png" mode=""></image>
				</view>
				<view class="user-g-i-n">
					联系客服
				</view>
			</view>
			<view class="user-g-a">
			</view>
		</button> -->
	</view>
</template>

<script>
	import base from '@/request/request.js'
	export default {
		data() {
			return {
				beaeUrl: base.imgUrl,
				hospital_name: "",
				userInfo: {},
				hospitalName: '', //医院名称
				order: [{
					id: 4,
					name: '已报修',
					num: 0
				}, {
					id: 1,
					name: '进行中',
					num: 0
				}, {
					id: 2,
					name: '待结单',
					num: 0
				}, {
					id: 3,
					name: '已完成',
					num: 0
				}],
				orderList: [{
					id: 1,
					name: '维保工单',
					imgUrl: require('../../static/user1.png')
				}, {
					id: 3,
					name: '年度费用支出',
					imgUrl: require('../../static/1ldpi.png')
				}, {
					id: 4,
					name: '使用说明',
					imgUrl: require('../../static/2ldpi.png')
				}, {
					id: 5,
					name: '设备运行环境监控',
					imgUrl: require('../../static/3.png')
				}, {
					id: 6,
					name: '电费计价方式设置',
					imgUrl: require('../../static/4.png')
				} ,{
					id: 2,
					name: '关于我们',
					imgUrl: require('../../static/user2.png')
				}],
				hospitalList: []
			}
		},
		onLoad() {

		},
		onShow() {
			console.log('------', this.beaeUrl)
			this.getHospital()
			this.hospital_name = ''
			this.getUserInfo() //获取头像
		},
		methods: {
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '确定退出状态？',
					confirmText: '确定',
					success: res => {
						if (res.cancel) {} else if (res.confirm) {
							uni.clearStorageSync('userInfo')
							this.cleanStorage()
							uni.reLaunch({
								url: '../login/login'
							})
						}
					}

				})
			},
			getHospital() {
				this.$https.post('/hospital/getHospitalList').then(res => {
					if (res.code == 1) {
						this.hospitalList = res.data
						res.data.forEach((item, index) => {
							if (index < this.hospitalList.length - 1) {
								this.hospital_name += item.name + '，'
							} else {
								this.hospital_name += item.name
							}
						})
						console.log(this.hospital_name, '-------')
					}
				})
			},
			getUserInfo() {
				/* 获取用户信息 */
				this.$https.post('/user/getUser').then(res => {
					this.order[0].num = res.data.accepted, //已申报
						this.order[1].num = res.data.ongoing, //进行中
						this.order[2].num = res.data.day_add, //待结单
						this.order[3].num = res.data.done, //已完成
						this.userInfo = res.data.user
					this.hospitalName = res.data.name //医院名称
				})
			},
			/* 工单跳转 */
			navOrder(id) {
				uni.navigateTo({
					url: '../order/order?id=' + id + '&type=' + 0 //0我的工单 1维保工单
				})
			},
			/* 功能跳转 */
			jumpFun(id) {
				switch (id) {
					case 1:
						wx.navigateTo({
							url: '../order/order?type=' + 1 //0我的工单 1维保工单
						})
						break;
					case 2:
						wx.navigateTo({
							url: '../about_us/about_us'
						})
						break;
					case 3:
						wx.navigateTo({
							url: '../order/yearCost?type=' + 1
						})
						break;
					case 4:
						wx.navigateTo({
							url: '../about_us/about_us?type=1'
						})
						break;
					case 5:
						wx.navigateTo({
							url: '../index/environment'
						})
						break;
					case 6:
						wx.navigateTo({
							url: '../about_us/price'
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kefu {
		background-color: #FFFFFF;
	}

	button::after {
		/* background-color: #FFFFFF; */
		border: none;
	}

	.user {
		&-g {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;

			&-i {
				display: flex;
				align-items: center;
				margin-right: 10rpx;

				&-i {
					width: 44rpx;
					height: 44rpx;
					position: relative;

					image {
						position: absolute;
						top: 0rpx;
						left: 0rpx;
						width: 100%;
						height: 100%;
					}
				}

				&-n {
					font-size: 32rpx;
					font-weight: 500;
					color: #3B3B3B;
					line-height: 31rpx;
					margin-left: 16rpx;
				}
			}

			&-a {
				width: 15rpx;
				height: 15rpx;
				border-left: 5rpx solid #DADADA;
				border-bottom: 5rpx solid #DADADA;
				transform: rotate(225deg)
			}
		}

		&-o {
			margin: 52rpx 32rpx 0;
			padding-bottom: 56rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 4rpx solid #F5F6F8;

			&-i {
				flex: 1;
				text-align: center;

				&-n {
					font-size: 28rpx;
					font-weight: 500;
					color: #979797;
					line-height: 70rpx;
				}

				&-m {
					font-size: 24rpx;
					font-weight: 500;
					color: #3B3B3B;
					line-height: 28rpx;

					&-a {
						font-size: 44rpx;
						font-weight: 600;
						color: #000000;
						line-height: 52rpx;
						margin-right: 6rpx;
					}
				}
			}
		}

		&-h {
			margin: 0 32rpx;
			color: #FFFFFF;
			font-weight: 600;
			font-size: 40rpx;
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
			width: 92%;
		}

		&-t {
			display: flex;
			padding: 68rpx 32rpx 32rpx;
			align-items: center;

			&-a {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 34rpx;
				border: 5rpx solid #FFFFFF;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&-r {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				&-n {
					font-size: 34rpx;
					color: #FFFFFF;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 260rpx;
				}

				&-h {
					font-size: 28rpx;
					font-weight: 600;
					color: rgba(255, 255, 255, 0.8);
					line-height: 33rpx;
				}
			}
		}
	}
</style>